<template>
	<div class="pageSetting">
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:tree-config="treeConfig"
			:toolbar-config="toolbarConfig"
			:edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
		>
			<template #name="{ row }">
				<span>{{ row.meta.title }}</span>
			</template>
			<template #whetherEnable="{ row }">
				<span>{{ whetherEnableObject[row.meta.whetherEnable] }}</span>
			</template>
			<template #hideFlag="{ row }">
				<span>{{ whetherEnableObject[row.meta.hide] }}</span>
			</template>
			<template #toolbar_buttons>
				<div
					style="
						height: 100%;
						width: 100%;
						display: flex;
						justify-content: start;
						align-item: center;
					"
				>
					<el-input
						v-model="query"
						placeholder="请输入名称或拼音码"
						size="small"
						style="width: 250px"
						clearable
						@keyup.enter.native="handlerSearch"
					>
						<el-button
							slot="append"
							icon="el-icon-search"
							@click="handlerSearch"
						/>
					</el-input>
					<el-button
						type="primary"
						size="small"
						style="margin-left: 10px"
						@click="handlerAddClick"
					>
						新增
					</el-button>
				</div>
			</template>
			<template #edit="{ row }">
				<el-button type="text" size="small" @click="handlerEditRow(row)">
					编辑
				</el-button>
				<el-button
					v-if="row.meta.type == 0"
					type="text"
					size="small"
					@click="handlerEditAddMenu(row)"
				>
					添加
				</el-button>
				<el-button
					v-if="row.meta.type == 1"
					type="text"
					size="small"
					@click="handlerMenuButtons(row)"
				>
					按钮
				</el-button>
				<el-button type="text" size="small" @click="handlerDelRow(row)">
					删除
				</el-button>
			</template>
		</shyt-table>
		<menuDialog
			ref="menuDialog"
			:visible.sync="menuDialogVisible"
			:title="menuDialogTitle"
			:menu-data.sync="curMenuData"
			:parent-menu.sync="parentMenu"
			:menu-dialog-type="menuDialogType"
			@submit="handlerSubmit"
		/>
		<menuButtons
			:menu-buttons-visible.sync="menuButtonsVisible"
			:parent-menu.sync="parentMenu"
			:cur-buttons.sync="curButtons"
			@submit="handlerMenuButtonsSubmit"
		></menuButtons>
	</div>
</template>

<script>
import {
	menuInsert,
	deleteMenu,
	getMenuList,
	updateMenu,
	buttonSave,
} from '@/http/api'
import { dealRouterData } from '@/utils/computedRoutes.js'
import { mapGetters, mapActions } from 'vuex'
import menuDialog from './components/menuDialog'
import menuButtons from './components/menuButtons.vue'
export default {
	name: 'MenuSetting',
	components: {
		menuDialog,
		menuButtons,
	},
	data() {
		return {
			query: '',
			menuDialogVisible: false,
			menuButtonsVisible: false,
			whetherEnableObject: { 0: '是', 1: '否' },
			menuDialogTitle: '',
			menuDialogType: '',
			columns: [
				{
					field: 'name',
					title: '菜单名称',
					slots: { default: 'name' },
					treeNode: true,
				},
				{
					field: 'path',
					title: '菜单路径',
				},
				{
					field: 'whetherEnable',
					title: '是否启用',
					slots: { default: 'whetherEnable' },
				},
				{
					field: 'hideFlag',
					title: '是否显示',
					slots: { default: 'hideFlag' },
				},
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			],
			treeConfig: {
				children: 'children',
				expandAll: true,
			},
			tableData: [],
			$table: null,
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			curMenuData: {},
			parentMenu: {},
			curButtons: [],
		}
	},
	computed: {
		...mapGetters(['sideMenuList']),
	},
	watch: {
		sideMenuList: {
			handler: function (val) {
				this.tableData = this._.cloneDeep(val)
			},
			immediate: true,
			deep: true,
		},
	},
	mounted() {
		this.$table = this.$refs.shytTable.$refs.xTable
	},
	methods: {
		...mapActions('router', ['ADD_ROUTES']),
		handlerMenuButtonsSubmit(arr) {
			buttonSave(arr).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.$message.success('保存成功')
					this.menuButtonsVisible = false
					this.handlerSearch()
					this.ADD_ROUTES()
				}
			})
		},
		handlerMenuButtons(row) {
			this.parentMenu = row
			this.curButtons = row.buttonList ? [...row.buttonList] : []
			this.menuButtonsVisible = true
		},
		handlerSearch() {
			this.getMenuList(
				{
					menuNameOrInputCode: this.query.toUpperCase(),
				},
				true,
			)
		},
		getMenuList(param, bool) {
			getMenuList(param).then(({ data }) => {
				if (data?.head?.code == 200) {
					const res = dealRouterData(data.data)
					if (bool) {
						this.tableData = res
					} else {
						this.$store.commit('common/CHANGE_SIDEMENULIST', res)
						res.forEach(i => {
							this.$router.addRoute(i)
						})
					}
					this.$nextTick(() => {
						this.$table.setAllTreeExpand(true)
					})
				}
			})
		},
		handlerSubmit(formData, parentData, type) {
			// debugger
			let res = { ...formData }
			let isHttpView = res.menuHref.includes('http')
			if (!parentData?.meta) {
				res.parentUuid = 0
				res.parentUuids = 0
				if (res.menuType == 0) {
					if (isHttpView) {
						res.menuAssemblyHref = 'httpView'
					} else {
						res.menuAssemblyHref = 'layout'
					}
				}
			} else {
				if (parentData?.meta?.type == 0 && res.type == 0) {
					if (isHttpView) {
						res.menuAssemblyHref = 'httpView'
					} else {
						res.menuAssemblyHref = 'mainView'
					}
				}
				if (!isHttpView) {
					res.menuHref = res.menuHref.startsWith('/')
						? res.menuHref.split().slice(1).join('')
						: res.menuHref
				} else {
					res.menuAssemblyHref = 'httpView'
				}
				res.parentUuid = parentData.meta.id
				res.parentUuids = parentData.meta.parentUuids + ',' + parentData.meta.id
			}

			if (type == '1') {
				menuInsert(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('新增成功')
						this.menuDialogVisible = false
						this.handlerSearch()
					}
				})
			} else {
				updateMenu(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('编辑成功')
						this.menuDialogVisible = false
						this.handlerSearch()
					}
				})
			}
		},
		handlerAddClick() {
			this.menuDialogTitle = '菜单新增'
			this.menuDialogType = '1'
			this.menuDialogVisible = true
			this.curMenuData = {
				menuName: '',
				menuHref: '',
				menuIcon: '',
				menuAssemblyHref: '',
				menuType: '1',
				whetherEnable: '0',
				hideFlag: '0',
			}
		},
		// handlerDelSelect() {},
		// handlerSave() {},
		handlerEditRow(row) {
			this.menuDialogTitle = '菜单编辑'
			this.menuDialogType = '2'
			let parentUuid = row.meta.parentUuid
			let parentUuids = row.meta.parentUuids
			if (parentUuid != 0) {
				let arr = parentUuids.split(',').slice(1)
				let res = this.tableData.find(i => {
					return i.meta.id == arr[0]
				})
				// let cur
				if (arr.slice(1).length > 0) {
					arr.slice(1).forEach(i => {
						res = res.children.find(k => k.meta.id == i)
					})
				}
				// cur = res
				this.parentMenu = res
			}
			this.curMenuData = {
				menuName: row.meta.title,
				menuHref: row.path,
				menuAssemblyHref: row.meta.menuAssemblyHref,
				menuIcon: row.meta.icon,
				menuType: row.meta.type,
				whetherEnable: row.meta.whetherEnable,
				hideFlag: row.meta.hide,
				id: row.meta.id,
			}
			this.menuDialogVisible = true
		},
		handlerDelRow(row) {
			this.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					deleteMenu({ id: row.meta.id }).then(({ data }) => {
						if (data?.head?.code == 200) {
							this.$message.success('删除成功')
							this.handlerSearch()
						}
					})
				})
				.catch(() => {})
		},
		handlerEditAddMenu(row) {
			this.parentMenu = row
			this.handlerAddClick()
		},
	},
}
</script>

<style lang="scss" scoped>
.pageSetting {
	padding: 10px;
	box-sizing: border-box;
	height: 100%;
}
</style>
